<template>
  <div class="quota_main">
    <div class="quota_main_top">
      <span>指定商品价格</span>
    </div>
    <div class="quota_main_center">
      <!-- <div class="quota_main_center_top">
        <el-radio-group v-model="data.checkValue" @change="handelChange">
          <el-radio value="1" size="large">根据商品添加</el-radio>
          <el-radio value="2" size="large">根据组合条件</el-radio>
        </el-radio-group>
      </div> -->
      <div class="quota_main_center_botton">
        <!-- <div>
          定额主材成本：<span>￥{{ data.costTotalMoney }}</span>
        </div> -->
        <div>
          <el-button type="primary" plain @click="handelClickAddCommodity">添加材料</el-button>
        </div>
      </div>
    </div>
    <div class="quota_main_botton">
      <el-table :data="data.quotaDate" class="jzt-table" stripe height="320">
        <el-table-column label="序号" type="index" width="60"></el-table-column>
        <el-table-column label="商品信息" prop="productAliasName" width="300">
          <template #default="scope">
            <div class="sp_content">
              <div class="imgs">
                <img :src="scope.row.mainPicUrl" alt="" />
              </div>
              <div class="content_text">
                <p>{{ scope.row.productAliasName }}</p>
                <p>{{ scope.row.skuSpecification }}</p>
                <p>SKU编码：{{ scope.row.skuCode }}</p>
                <p>ID:{{ scope.row.productId }}</p>
              </div>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="品牌" prop="brandName"></el-table-column>
        <el-table-column label="型号" prop="modeCode"></el-table-column>
        <el-table-column label="单位" prop="productUnit">
          <template #default="scope">
            {{ useCodeArrStore().getDictName("shop_unit", scope.row.productUnit) }}
          </template>
        </el-table-column>
        <el-table-column label="单价成本" prop="factoryRealPrice"></el-table-column>
        <el-table-column label="销售单价" prop="clinetRealPrice"></el-table-column>
        <el-table-column label="指定销售价" prop="salePrice">
          <template #default="scope">
            <el-input-number
              style="width: 100px"
              size="small"
              :min="0"
              v-model="scope.row.salePrice"
              :controls="false"
            ></el-input-number>
          </template>
          <template #header>
            <div style="display: flex; align-items: center">
              <span style="color: red; margin-right: 6px">*</span>
              指定销售价
            </div>
          </template>
        </el-table-column>
        <el-table-column label="供应商" prop="factoryName"></el-table-column>
        <el-table-column label="操作">
          <template #default="scope">
            <el-popconfirm title="确认删除?" @confirm="handelClickDeletPepol(scope.row)">
              <template #reference>
                <el-button link type="primary">删除</el-button>
              </template>
            </el-popconfirm>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="footer">
      <el-button size="large" @click="handelClickGoToBak">返回</el-button>
      <el-button type="primary" size="large" @click="handelClickSuerAddd">确认添加</el-button>
    </div>
    <!-- 选择商品弹框 -->
    <commodityView
      :show="data.commodityVisible"
      :width="'1200px'"
      :code="data.code"
      @close="handelClose"
      @submit="handelSubmit"
    ></commodityView>
  </div>
</template>
<script setup>
import { reactive, ref, onMounted } from "vue";
import { useRouter, useRoute } from "vue-router";
// import check from "@/static/images/check.png";
// import { Delete, Close } from "@element-plus/icons-vue";
import { ElMessage } from "element-plus";
import useCodeArrStore from "@/store/modules/select";
// 组件
import commodityView from "./components/ImportMaterials/commodityView";
// api
import {
  categoryList,
  queryStastsList,
  saveOrUpdateCb,
  saveOrUpdateQuotaProductCondition
  // quotaProductLists
} from "@/apis/createFile/index.js";
import { pageList, fixedPriceSave, fixedPriceDelete } from "@/apis/budgetQuotation";
import { Date } from "core-js";
// 变量定义
const router = useRouter();
const route = useRoute();
const filterVal = ref([]);
const data = reactive({
  checkValue: "1",
  treeList: [],
  screenList: [],
  // 选中的树结构
  choseTreeList: [],
  categoryId: "",
  commodityVisible: false, //显示商品弹框
  quotaDate: [],
  costTotalMoney: 0,
  costTotalPrice: 0,
  quoteTotalMoney: 0,
  code: ""
});
// 确认导入后的最后数据
const handelSubmit = (list, code) => {
  data.code = code;
  const parms = {
    code: code,
    templateId: route.query.templateId,
    list: list
  };
  fixedPriceSave(parms).then(res => {
    console.log(res, "res");
    if (res.code === 200) {
      ElMessage({
        type: "success",
        message: "导入成功"
      });
      getquotaProductList();
      data.commodityVisible = false;
    } else {
      ElMessage({
        type: "error",
        message: res.msg
      });
    }
  });
};
const handelClickDeletPepol = item => {
  // let index = data.quotaDate.findIndex(citem => citem.productId === item.productId);
  // if (index > -1) {
  //   data.quotaDate.splice(index, 1);
  // }
  const parms = {
    id: item.id
  };
  fixedPriceDelete(parms).then(res => {
    if (res.code === 200) {
      ElMessage({
        type: "success",
        message: "删除成功"
      });
      getquotaProductList();
    } else {
      ElMessage({
        type: "error",
        message: res.msg
      });
    }
  });
};
const forms = ref({
  maxValue: 0,
  minValue: 0,
  limitProductNum: 0,
  limitProductMoney: 0
});
// 确认添加
const handelClickSuerAddd = () => {
  const parms = {
    code: data.code,
    templateId: route.query.templateId,
    list: data.quotaDate
  };
  fixedPriceSave(parms).then(() => {
    ElMessage({
      type: "success",
      message: "添加成功"
    });
    router.go(-1);
  });
};
// 添加商品
const handelClickAddCommodity = () => {
  data.commodityVisible = true;
};
const handelClose = () => {
  data.commodityVisible = false;
};
// 返回
const handelClickGoToBak = () => {
  // router.go(-1);
  router.push({ path: "/budget-management", query: { edit: "1" } });
};
// 方法定义
const handelChange = v => {
  console.log(v);
};
const handelClickChose = item => {
  item.checked = !item.checked;
};
// 删除已选中的整条
const handelClickDeleteItem = item => {
  let it = data.choseTreeList.findIndex(citem => citem.categoryId == item.categoryId);
  if (it > -1) {
    data.choseTreeList.splice(it, 1);
  }
};
// 删除某一项已选中的
const handelClickDeleteCItem = (item, citem) => {
  let it = item.list.findIndex(c => c.stastsId == citem.stastsId);
  if (it > -1) {
    item.list.splice(it, 1);
  }
};
// 获取树形结构
const getCategoryList = () => {
  const parms = {
    page: 1,
    size: 1000
  };
  categoryList(parms)
    .then(res => {
      console.log(res);
      res.data.map(it => {
        it.label = it.name;
        if (it.children.length > 0) {
          it.children.map(item => {
            item.label = item.name;
            if (item.children.length > 0) {
              item.children.map(item2 => {
                item2.label = item2.name;
              });
            }
          });
        }
      });
      data.treeList = res.data;
    })
    .catch(err => {
      console.log(err);
    });
};
const changeAttr2 = (val, item, item2, index) => {
  console.log(val, item, item2, index);
  data.choseTreeList.map(it => {
    if (it.categoryId == data.categoryId) {
      it.list.push(item2);
    }
  });
};
const changeAttr3 = (val, item, item2, index) => {
  console.log(val, item, item2, index);
  data.choseTreeList.map(it => {
    if (it.categoryId == data.categoryId) {
      // it.list.push(item2)
      item.children.map(cit => {
        if (cit.stastsId == val[0]) {
          it.list.push(cit);
        }
      });
    }
  });
};
// 点击树结构
const handleNodeClick = v => {
  console.log(v);
  data.categoryId = v.categoryId;
  v.list = [];
  data.choseTreeList.push(v);
  const uniqueArray = data.choseTreeList.reduce((accumulator, currentItem) => {
    const isExisting = accumulator.findIndex(item => JSON.stringify(item) === JSON.stringify(currentItem)) > -1;
    if (!isExisting) {
      accumulator.push(currentItem);
    }
    return accumulator;
  }, []);
  data.choseTreeList = uniqueArray;
  const parms = {
    categoryId: v.categoryId
    // size:1000,
    // page: 1
  };
  queryStastsList(parms)
    .then(res => {
      console.log(res);
      res.data.map(it => {
        if (it.children?.length > 0) {
          it.children.map(it2 => {
            it2.checked = false;
            if (it2.children?.length > 0) {
              it2.children.map(it3 => {
                it3.checked = false;
              });
            }
          });
        }
      });
      data.screenList = res.data;
      console.log(res.data, "pppp");
    })
    .catch(err => {
      console.log(err);
    });
};
// 获取定额主材列表
const getquotaProductList = () => {
  const parms = {
    page: 1,
    size: 10000,
    templateId: route.query.templateId
  };
  pageList(parms).then(res => {
    console.log(res);
    data.quotaDate = res.data.records;
    // data.costTotalMoney = res.data.costTotalMoney;
  });
  console.log("获取定额主材");
};
onMounted(() => {
  getCategoryList();
  getquotaProductList();
  data.code = Date.now();
});
// watch(
//   () => data.quotaDate,
//   list => {
//     let sum = list.reduce(
//       (accumulator, currentItem) => accumulator + Number(currentItem.productNumber) * Number(currentItem.clinetRealPrice),
//       0
//     );
//     data.costTotalPrice = sum;
//   },
//   { deep: true }
// );
</script>
<style scoped lang="scss">
// 组合
.combination_content {
  display: flex;
  flex-direction: row;
  height: 100%;
  padding: 20px;
  overflow: hidden;
  .left {
    flex: 1;
    max-width: 200px;
    background-color: #e1e6ed;
    border: 1px solid #e2e8f0;
    box-sizing: border-box;
    :deep(.el-tree) {
      background-color: transparent !important;
    }
  }
  .center {
    flex: 2;
    background-color: #ffffff;
    display: flex;
    flex-direction: column;
    &_header {
      flex: 1;
      max-height: 64px;
      border-bottom: 1px solid #e2e8f0;
      border-top: 1px solid #e2e8f0;
      box-sizing: border-box;
      display: flex;
      padding: 0 20px;
      justify-content: space-between;
      &_child {
        display: flex;
        align-items: center;
        margin-right: 10px;
        span:nth-child(1) {
          font-size: 16px;
          color: #606266;
          margin: 0 4px 0 0;
          flex: 1;
          min-width: 80px;
          max-width: 100px;
        }
        :deep(.el-input__inner) {
          width: 80px;
        }
      }
    }
  }
  .right {
    flex: 1.5;
    min-width: 200px;
    background-color: #ffffff;
    border: 1px solid #e2e8f0;
    box-sizing: border-box;
    padding: 20px;
    .header {
      height: 64px;
      color: #86909c;
      display: flex;
      align-items: center;
      font-size: 14px;
      // padding-left: 20px;
    }
    .child_item {
      overflow: hidden;
      .child_item_title {
        width: 100%;
        height: 30px;
        background: #f2f6fc;
        display: flex;
        align-items: center;
        justify-content: space-between;
        // padding: 0 10px;
        span {
          margin: 0 10px;
        }
        i {
          margin: 0 10px;
          cursor: pointer;
        }
      }
      ul {
        display: flex;
        flex-direction: row;
        margin-top: 10px;
        flex-wrap: wrap;
        li {
          padding: 4px 10px;
          box-sizing: border-box;
          border: 1px dashed #ccc;
          box-sizing: border-box;
          margin: 0 10px 10px 0;
          border-radius: 10px;
          display: flex;
          flex-direction: row;
          align-items: center;
          cursor: pointer;
        }
      }
    }
  }
}
.quota_main {
  // display: flex;
  // flex-direction: column;
  position: relative;
  height: 100%;
  .quota_main_top {
    height: 62px;
    border-bottom: 1px solid #ccc;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    span {
      font-size: 18px;
      color: #131414;
      margin-left: 30px;
      position: relative;
    }
    span::before {
      content: " ";
      width: 6px;
      height: 6px;
      background-color: #409eff;
      border-radius: 50%;
      position: absolute;
      left: -10px;
      top: 50%;
      transform: translate(-50%, -50%);
    }
  }
  .quota_main_center {
    box-sizing: border-box;
    padding: 20px 20px 0 20px;
    &_top {
      background: #f2f6fc;
      height: 40px;
      padding-left: 20px;
      overflow: hidden;
    }
    &_botton {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin: 25px 0 15px 0;
      div:first-child {
        font-size: 18px;
        color: #3d3d3d;
        span {
          font-size: 18px;
          color: #ff3333;
        }
      }
    }
  }
  .quota_main_botton {
    // height: 44px;
    box-sizing: border-box;
    padding: 20px;
  }
  .footer {
    // position: absolute;
    // bottom: 0;
    // left: 0;
    width: 100%;
    z-index: 2;
    background: #fff;
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    align-items: center;
    // padding-right: 20px;
    button:nth-child(1) {
      margin-right: 10px !important;
    }
    button {
      margin-right: 20px;
    }
  }
}
.center_content {
  .center_content_becurrent {
    padding: 15px;
    .header {
      font-size: 16px;
      color: #000;
      height: 50px;
      display: flex;
      justify-content: space-between;
      .total {
        font-weight: bold;
        color: red;
      }
    }
  }
  .center_content_specification {
    padding: 15px;
    .header {
      font-size: 16px;
      color: #000;
      height: 50px;
    }
  }
}

.attr3 {
  display: flex;
  .child_name {
    margin: 0 10px 0 0;
  }
}
:deep(.el-collapse-item__header) {
  display: none;
}
.sx_chose {
  border-top: 1px solid #eef1f4;
  box-sizing: border-box;
  :deep(.el-collapse-item__header) {
    display: block !important;
    text-align: left;
    position: relative;
    i {
      position: absolute;
      right: 0;
      top: 50%;
    }
  }
}
.secondary {
  :deep(.el-checkbox__input) {
    display: none !important;
  }
  :deep(.el-checkbox) {
    padding: 0 !important;
  }
  .attr2 {
    color: #4e5969 !important;
  }
  :deep(.el-select__wrapper) {
    height: 32px !important;
  }
}
:deep(.el-select__wrapper) {
  height: 32px !important;
}
:deep(.el-collapse) {
  border: none !important;
}
// :deep(.el-checkbox__input) {
//   width: 100px;
//   height: 100%;
//   background: #ffffff;
//   box-shadow: 0px 3px 8px 0px rgba(0, 0, 0, 0.16);
//   border-radius: 4px 4px 4px 4px;
//   padding: 4px 10px;
// }
// :deep(.el-checkbox__label) {
//   position: absolute !important;
//   left: 0 !important;
// }
:deep(.el-checkbox) {
  padding: 7px 19px !important;
}
.active {
  border: 1px solid #007dff;
}
.active-secondary {
  border-bottom: 2px solid #007dff;
}
// :deep(.el-checkbox__inner) {
//   width: 0 !important;
//   height: 0 !important;
//   display: none !important;
// }
:deep(.el-checkbox__label) {
  padding: 0 !important;
}
:deep(.is-checked) {
  color: #000 !important;
}
// :deep(.el-checkbox) {
//   color: #000 !important;
// }
:deep(.el-collapse-item__content) {
  margin-top: 10px;
}
// .filter{
//   // :deep(.el-collapse-item__header){
//   //   display: none !important;
//   // }
// }
.child_name {
  width: auto;
  // height: 100%;
  font-size: 14px;
  color: #3d3d3d;
  display: flex;
  align-items: center;
  cursor: pointer;
  background: #ffffff;
  box-shadow: 0px 3px 8px 0px rgba(0, 0, 0, 0.16);
  border-radius: 4px 4px 4px 4px;
  margin-right: 6px;
  // padding: 5px 19px;
  // overflow: hidden;
  position: relative;
  .attr2 {
    color: #000 !important;
  }
  .check {
    position: absolute;
    right: -1px;
    bottom: -2px;
    img {
      width: 20px;
    }
  }
  :deep(.el-checkbox__input) {
    display: none !important;
  }
}
p,
h1 {
  margin: 0;
  padding: 0;
  font-weight: normal;
}

:deep(.el-collapse-item__header) {
  font-size: 16px;
  color: #3d3d3d;
}

:deep(.el-checkbox-group) {
  display: flex;

  .attr-wrap {
    display: flex;
    align-items: center;
    // border: 1px solid #dcdfe6;
    border-radius: 4px;
    height: 32px;
    // padding: 0 8px;

    &:not(:last-of-type) {
      margin-right: 8px;
    }
  }
}

:deep(.el-checkbox.el-checkbox--small.is-bordered) {
  height: auto;
  height: 32px;

  .el-checkbox__label {
    .attr-wrap {
      display: flex;
      align-items: center;
    }
  }
}
:deep(.el-collapse-head-5) {
  height: 0px !important;
}
.attr-item {
  display: flex;
  align-items: center;
  margin-right: 50px;
}
.reset_box {
  display: flex;
  justify-content: space-between;
  p {
    font-size: 16px;
    color: #3d3d3d;
  }
  button {
    margin-top: 10px;
  }
}
// 已选中的样式
.sp_content {
  display: flex;
  .imgs {
    width: 80px;
    height: 80px;
    min-width: 80px;
    border-radius: 4px;
    overflow: hidden;
    img {
      width: 100%;
      height: 100%;
    }
  }
  .content_text {
    margin-left: 18px;
    p {
      font-size: 12px;
      color: #86909c;
    }
    P:nth-child(1) {
      font-size: 14px !important;
      color: #3d3d3d !important;
    }
  }
}
</style>
